<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://localhost/resource/back/">
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Validform/5.3.2/Validform.js" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">
</head>
<body>
<div class="pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="华为" placeholder=""  name="gname"  datatype="*2-16">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="2999.0" placeholder=""  name="gprice"  datatype="*">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品父类型：</label>
            <div class="formControls col-5">
				<span class="select-box" style="width:150px;">
					<select id="gtypePid" class="select" name="gtypePid" size="1">
					</select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品子类型：</label>
            <div class="formControls col-5">
				<span class="select-box" style="width:150px;">
					<select id="gtypeCid" class="select" name="gtypeCid" size="1">
					</select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="100" placeholder=""  name="stock"  datatype="n" >
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品图片：</label>
            <input type="hidden" id="gpng" name="gpng" >
            <div id="uploader-demo">
                <!--用来存放item-->
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择图片</div>
            </div>
        </div>
         <div class="row cl">
            <label class="form-label col-3">备注：</label>
            <div class="formControls col-5">
                <textarea name="gdesc" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"> </div>
        </div>
<!--        <div class="row cl">
            <label class="form-label col-3">角色：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="admin-role" size="1">
					<option value="0">超级管理员</option>
					<option value="1">总编</option>
					<option value="2">栏目主辑</option>
					<option value="3">栏目编辑</option>
				</select>
				</span> </div>
        </div>-->
       <!-- <div class="row cl">
            <label class="form-label col-3">备注：</label>
            <div class="formControls col-5">
                <textarea name="" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"> </div>
        </div>-->
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="http://localhost/resource/back/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/AjaxUtils.js"></script>
<!--<script type="text/javascript" src=/js/AjaxUtils.js"></script>-->
<script type="text/javascript">
    function initGoodsType(id, pEleId) {
        // 1.查询所有的大类
        get("back/goodsTypeController/getTypePid/" + id, function (data) {
            var pidEle = $("#" + pEleId);

            // 在新元素之前首先应该情况当前的元素
            // pidEle.childNodes().remove();
            var chilLen = pidEle.children().length;
            if (chilLen > 0) {
                pidEle.children().remove();
            }
            for (var i = 0; i < data.length; i++) {
                // 1、创建option元素
                var o = document.createElement("option");
                o.value = data[i].id;
                o.text = data[i].goodsTypeName;

                // 2.把这个option元素添加到pidEle
                pidEle.append(o);
            }
        });
    }
    initGoodsType(-1,"gtypePid")
   /* $("#gtypePid").click(function(){
        $.get("http://localhost/back/goodsTypeController/getTypePid/-1",function (data) {
            console.info(data);
            var chilLen =  $("#gtypePid").children().length;
            if (chilLen > 0) {
                $("#gtypePid").children().remove();
            }
            for (var i=0;i<data.length;i++){
                var o = document.createElement("option");
               o.value=data[i].id;
               o.text=data[i].goodsTypeName;
               $("#gtypePid").append(o);
            }
        });
    });*/
    /*$("#gtypePid").change(function () {
        var pid=$(this).val();
       get("back/goodsTypeController/getTypePid/"+pid,function (data) {
           console.info(data)
           var chilLen =  $("#gtypeCid").children().length;
           if (chilLen > 0) {
               $("#gtypeCid").children().remove();
           }
           for (var i=0;i<data.length;i++){
               var o = document.createElement("option");
               o.value=data[i].id;
               o.text=data[i].goodsTypeName;
               $("#gtypeCid").append(o);
           }
       },"json");
       });*/
    $("#gtypePid").change(function () {
        var pid = $(this).val();
        initGoodsType(pid, "gtypeCid");
    });
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // 文件接收服务端。
        server: 'http://localhost/resource/file/upload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');


        // $list为容器jQuery实例
        $("#fileList").append($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100);
    });
    // a.png|b.png|c.png
    // 服务端有数据返回就会触发这个函数
    uploader.on('uploadSuccess', function (file, resp) {
        var url = resp._raw;
        console.info(url);
        var gpng = $("#gpng").val();
        if (gpng) {
            // 隐藏域中已经包含了图片
            url = gpng + "|" + url;
        }
        // 图片是第一次上传
        $("#gpng").val(url);
    });

    $("#form-admin-add").Validform({
        tiptype: 2,
        // //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，
        // 然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。
        callback: function (form) {
            // 在这里表单数据使用异步的方式提交
            // 1.把表单对象序列化成数组
            var fromArray = form.serializeArray();

            // 2.创建一个对象，把表单中的所有属性封装到param对象中
            var param = new Object();

            // 3.循环遍历数组，把数组中的值给他复制到param对象
            for (var i = 0; i < fromArray.length; i++) {
                var name = fromArray[i].name; // 表单元素的name属性
                var val = fromArray[i].value; // 表单元素对应的值

                // 复制
                param[name]=val; // 给param对象中设置属性
            }

            console.info(param);

            // 4.使用ajax发送param数据到后台
            $.post("http://localhost/back/goodsController/addGoods",param,function(data){

                // 1.判断这个请求是否处理成功了
                if(data.status == "success"){
                    layer.msg('操作成功', {icon: 1,time:1000},function(){
                        // 这里被调用说明提示层已经关闭了
                        // 关闭添加用户的层
                        // 获取添加用户页面的层的索引
                        var index = parent.layer.getFrameIndex(window.name);
                        // 关闭层
                        parent.layer.close(index);
                    });
                    // 提示用户操作成功，然后关闭添加用户的层
                }else{
                    layer.msg(data.msg, {icon: 2,time:1000});
                }

            },"JSON");

            // form[0].submit();
            // var index = parent.layer.getFrameIndex(window.name);
            // parent.$('.btn-refresh').click();
            // parent.layer.close(index);
            return false;  // return false，则表单不会提交，
        }
    });
</script>
</body>
</html>